<template>

  <div id="find" class="find">
    <!-- header -->
    <yd-navbar slot="navbar" fixed>
      <a @click="$router.go(-1)" slot="left">
        <yd-navbar-back-icon></yd-navbar-back-icon>
      </a>
      <img slot="center" src="../assets/images/logo.png">
      <router-link to="#" slot="right">
        <yd-icon name="search" size="25px" color="#777"></yd-icon>
      </router-link>
    </yd-navbar>

    <!-- content -->
    <div class="content-find" fixed slot>
      <yd-tab>
        <yd-tab-panel label="推荐">
          <yd-list theme="5">
            <yd-list-item v-for="item in list">
              <img slot="img" :src="item.img">
              <span slot="title">{{item.title}}</span>
              <yd-list-other slot="other">
                <div>
                  <span class="list-price"><em>¥</em>{{item.price}}</span>
                  <span class="list-del-price">¥{{item.w_price}}</span>
                </div>
                <div>content</div>
              </yd-list-other>
            </yd-list-item>
          </yd-list>
        </yd-tab-panel>
        <yd-tab-panel label="品牌"><div class="space-100"></div>暂无内容，敬请期待。</yd-tab-panel>
        <yd-tab-panel label="活动"><div class="space-100"></div>暂无内容，敬请期待。</yd-tab-panel>
        <yd-tab-panel label="最新"><div class="space-100"></div>暂无内容，敬请期待。</yd-tab-panel>
        <yd-tab-panel label="最热">
          <div class="space-100">
          </div>
          暂无内容，敬请期待。
        </yd-tab-panel>
      </yd-tab>

    </div>

    <!-- footer -->
    <v-footer></v-footer>
  </div>

</template>

<script>
  import baseService from '../axios/'
  export default {
    name: 'find',
    data() {
      return {
        message: '发现',
        list: [{
            img: "//img1.shikee.com/try/2016/06/23/14381920926024616259.jpg",
            title: "标题111标题标题标题标题",
            price: 156.23,
            w_price: 89.36
          },
          {
            img: "//img1.shikee.com/try/2016/06/21/10172020923917672923.jpg",
            title: "标题222标题标题标题标题",
            price: 256.23,
            w_price: 89.36
          },
          {
            img: "//img1.shikee.com/try/2016/06/23/15395220917905380014.jpg",
            title: "标题333标题标题标题标题",
            price: 356.23,
            w_price: 89.36
          },
          {
            img: "//img1.shikee.com/try/2016/06/25/14244120933639105658.jpg",
            title: "标题444标题标题标题标题",
            price: 456.23,
            w_price: 89.36
          },
          {
            img: "//img1.shikee.com/try/2016/06/26/12365720933909085511.jpg",
            title: "标题555标题标题标题标题",
            price: 556.23,
            w_price: 89.36
          },
          {
            img: "//img1.shikee.com/try/2016/06/19/09430120929215230041.jpg",
            title: "标题666标题标题标题标题",
            price: 656.23,
            w_price: 89.36
          }
        ]
      }
    },
    computed: {
      pageId () {
	      return this.$store.store.state.pageId
      }
    },
    created(){
      let id = "find"; 
      this.setpageId(id);
    },
    methods:{
      setpageId (id) {
        this.$store.store.commit('setpageId',id)
      }
    }
  }

</script>

<style>
  .find .content-find {
    position: fixed;
    height: 91%;
    margin-top:13%;
    width:100%;
  }
  .find .content-find .yd-tab-panel {
    background-color:#F2F2F2;
    position: fixed;
    height:77%;
    width:100%;
    overflow-y: auto !important;
  }
  /*推荐列表样式*/
  .content-find .yd-list-img {
    padding: 30% 0;
  }
  .content-find .yd-list-img img {
    margin-top: -30%;
  }

  .card{
    display:block;
    height:230px;

    padding:10px 0; 
    background-color:#e4e4e4;
  }
  .card .title{

  }
   .card img{
     width:100%;
     height:100%;
   }

</style>
